<template>
	<view class="box">
		<view class="min-box" v-for="(item,index) in list" :key="index">
			<view class="img">
				<image :src="item.image" mode=""></image>
			</view>
			<view class="text">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				list:[]
			}
		},
		methods:{
			
		},
		mounted() {
			axios.get('http://localhost:8080/getResource/getData').then(res=>{					//使用模拟接口获取数据 渲染页面
				console.log(res.data)
				this.list = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.min-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			margin: 3px 0;
			.img{
				width: 56px;
				height: 56px;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				margin-top: 3px;
				font-size: 16px;
			}
			
		}
		
	}
</style>